import React, { Component } from "react";
import {
	View,
	Text,
	Image,
	ScrollView,
} from "react-native";

import styles from "./style";

//引入轮播图；
import ImageSwipe from "./../components/ImageSwipe";
//引入button按钮；
import CustomButton from "./../components/CustomButton";
//引入视频；
import Video from "./../components/Video";

const btnList = [
	{ id: 1, title: "健康教育", url: require("../images/btn1.png"), nav: "healthEdu", },
	{ id: 2, title: "商城", url: require("../images/btn2.png"), nav: "shoppingIndex", },
	{ id: 3, title: "健康数据", url: require("../images/btn3.png"), nav: "shoppingIndex", },
	{ id: 4, title: "活动", url: require("../images/btn4.png"), nav: "shoppingIndex", },
	{ id: 5, title: "健康天使", url: require("../images/btn5.png"), nav: "shoppingIndex", },
	{ id: 6, title: "一盏明灯", url: require("../images/btn6.png"), nav: "shoppingIndex", },
	{ id: 7, title: "商盟", url: require("../images/btn7.png"), nav: "shoppingIndex", },
	{ id: 8, title: "个人中心", url: require("../images/btn8.png"), nav: "shoppingIndex", },
];

export default class IndexHome extends Component {
	static navigationOptions = {
		tabBarLabel: "首页",
		title: "首页",
		tabBarIcon: ({tintColor}) => ( 
			< Image source = {require("../images/home.png")}
				style = {[{tintColor: tintColor}, styles.tabIcon]}
			/>
		),
	}
	constructor(props) {
		super(props);
	}
	render() {
		const {navigate} = this.props.navigation;
		const showBtnList = btnList.map((list, index) => {
			return (
				<CustomButton
					key={`${list.title}-${index}`}
					text={list.title}
					source={list.url}
					onPress={() => navigate(list.nav) }
				/>
			);
		})
		return ( 
			<View>
				<ScrollView>
					<ImageSwipe />
					<View style={styles.btnView}>
						{showBtnList}
					</View>
					<Video />
				</ScrollView>
			</View>
		);
	}
}